<template>
  <div class="box">
    <MyHeader :title="title" :color="red"></MyHeader>

    <MyGoods v-for="item in list " :key="item.id" :goods="item"></MyGoods>
   
    <MyFooter :list="list"></MyFooter>
  </div>
</template>

<script>
//1.头部
//.引入各种模块
//给标题改颜色
//可以在父组件引入，也可以在子组件直接更改

//2获取数据
//在main.js里面导入全局axios  父组件不用导入了
//1，先声明一个空数组 装获取过来的数组
//返回获取的数组里面的数据的数组 赋值给这个里面数组
//在父组件的goods 里面进行循环遍历 

//3渲染数据
//需要父组件传值给goods子组建 所有数据 动态绑定 属性goods：item
//传值给上面，在浏览器看这个属性名
//然后绑定 勾选框 双向绑定 m有默认勾选状态
//count在另外的子组件 不用管
//现在有个小bug 点击任意图片 第一个都会被选中 需要绑定id input和label绑定for


//4勾选框的处理
//在goods里面的count标签里面 绑定事件 让他们有联系渲染
//传值给count 接收所有对象
//继续给值上面goods里面有个goods_count属性 是默认值数量1 
//渲染成功后 再来绑定按钮++--
//会减到负数 所以要深度监听 也可以 goods.goods_count >1 && 才能减

//5全选功能
//在foot里面，的全选框里面双向绑定isAll
//计算isAll 里面有两个属性 set() get(){有返回属性}
//把父组件的list 给子组件  type:Array,
//拿到list后 去计算 循环

//6结算的总和
//在结算后面的0 改成一个函数 
//然后 遍历数组 判断 goods_state  勾选看累加数量
//state是勾选的状况 true 还是false 是true就加  用forEach

 //7总和
 //也要定义一个函数
 //然后forEach循环 在结算总和得基础上* 价格

 


import MyHeader from './components/MyHeader.vue'
import MyFooter from './components/MyFooter.vue'
import MyGoods  from './components/MyGoods.vue'

export default {
  name: 'ShoppcartApp',
    components:{
      MyHeader,
      MyFooter,
      MyGoods ,
      
    },

  data() {
    return {
      red: "red",
      title:'购物车',
      list:[]
    };
  },
  //在这里发送axios，获取数据
  //main.js里面的vue 就是app.vue的（其实是个组造对象）父亲 原型
  async created(){
    let res = await  this.$http({
        url:'/api/cart'
      })
      console.log(res.data.list);
      //返回获取的数组里面的数据的数组 赋值给这个里面数组
      this.list= res.data.list
  },

  mounted() {
    
  },

  methods: {
    
  },
};
</script>

<style lang="less" scoped>
.box{
  padding: 40px 0 50px 0;
}

</style>